<template>
  <div id="single-blog">
    <h1>{{blog.title}}</h1>
    <span>{{blog.content}}</span>
    <p>作者:{{blog.autoer}}</p>
    <button @click="deleteBlog()">删除</button>
    <router-link :to="'/edit/' + id">编辑</router-link>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 拿到路由的id 要传输什么就写什么this.$route.params
      id: this.$route.params.id,
      blog: {}
    };
  },
  // created实现函数自执行
  created() {
    axios
      .get("posts/" + this.id + "/.json")
      .then(data => {
        // console.log(data);
        // this.blog = data.body;
        return data.data;
      })
      .then(data => {
        this.blog = data;
      });
  },
  methods: {
    deleteBlog() {
      axios.delete("posts/" + this.id + "/.json").then(response => {
        this.$router.push({ path: "/" });
      });
    }
  }
};
</script>
<style lang="less" scope>
#single-blog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: #eee;
  border: 1px dotted #aaa;
}
a {
  color: #000;
  background-color: #eee;
}
</style>